<!--分发页面-->
<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import { disposeOrderDistribute } from '@/apis/order.js'
import { Toast } from 'vant'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'
import UnitSelect from '@/views/workOrder/components/UnitSelect.vue'

const router = useRouter()

const distributeFormRef = ref('')
const formData = reactive({
  orgIdList: [],
  opinion: '',
  attachmentInfo: []
})

const isShowFFJG = ref(false)
const submitLoading = ref(false)
// 提交表单
async function onSubmit() {
  try {
    submitLoading.value = true
    const params = {
      orderNo: router.currentRoute.query.orderNo,
      orgIdList: formData.orgIdList?.map((item) => item.id),
      opinion: formData.opinion,
      attachmentInfo: formData.attachmentInfo?.map((item) => ({
        url: item.url,
        originalName: item.originalName
      }))
    }
    const res = await disposeOrderDistribute(params)
    submitLoading.value = false
    if (res.ret === 0) {
      Toast.success('保存成功')
      router.back()
    } else {
      Toast.fail(res.msg || '保存失败')
    }
  } catch (error) {
    submitLoading.value = false
    Toast.fail('网络错误，请稍后再试~')
  }
}

onMounted(async () => {
  formData.orderNo = router.currentRoute.query.orderNo
})
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <van-form
      ref="distributeFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <van-field
        readonly
        required
        name="sourceType"
        label="分发指挥中心"
        placeholder="请选择"
        input-align="right"
        is-link
        label-class="text-16px"
        class="org-select"
        @click="isShowFFJG = true"
      >
        <template #input>
          <div class="flex flex-col">
            <div
              v-for="item in formData.orgIdList"
              :key="item.id"
              class="w-50vw overflow-x-auto whitespace-nowrap text-align-end"
            >
              {{ item.name }}
            </div>
          </div>
        </template>
      </van-field>
      <CustomTextarea :modelValue.sync="formData.opinion" label="分发意见" />
    </van-form>
    <div class="px-16px mt-8px bg-white">
      <DetailItem label="附件" top>
        <FileList
          removable
          :upload="true"
          :preview="true"
          :files.sync="formData.attachmentInfo"
          :imageMax="9"
          :otherMax="0"
        >
          <template #empty="{ handleUpload }">
            <div class="h-80px w-80px" @click="handleUpload">
              <UploadTrigger icon-size="7vw" />
            </div>
          </template>
        </FileList>
      </DetailItem>
    </div>
    <div class="py-24px px-16px">
      <van-button
        :disabled="formData.orgIdList.length === 0"
        type="primary"
        size="normal"
        block
        @click="onSubmit"
        :loading="submitLoading"
      >
        提交
      </van-button>
    </div>
    <UnitSelect :show.sync="isShowFFJG" :modelValue.sync="formData.orgIdList" />
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.org-select.van-cell--required::before {
  left: 30vw;
}
.van-cell--required::before {
  left: 22vw;
}

.text-with-ellipsis {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* 防止默认的省略号显示 */
  padding-left: 1.5em; /* 为省略号留出空间 */
}

.text-with-ellipsis::before {
  content: '...';
  position: absolute;
  left: 0;
  top: 0;
  background: white; /* 背景色与容器背景色一致 */
  padding-right: 0.1em; /* 为文本留出一些空间 */
}
</style>
